<template>
  <el-upload class="avatar-uploader" :show-file-list="false" action="string" :http-request="Upload">
    <div v-if="!showPercentage" style="border: 1px dashed #d9d9d9;">
      <img v-if="objectA.src" :src="objectA.src" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon" style="width:178px;" />
    </div>
    <el-progress v-else type="circle" :width="178" :percentage="percentage" />
    <video
      id="video_hide"
      src="movie.ogg"
      controls="controls"
      style="visibility:hidden;height:1px;width:1px;"
    >您的浏览器不支持 video 标签。</video>
  </el-upload>
</template>

<script>
import OSS from "ali-oss";
import { setInterval, clearInterval } from "timers";
const client = new OSS({
  region: "oss-cn-shanghai",
  accessKeyId: "LTAIxZYjNPM6pgO3",
  accessKeySecret: "11iG8LcwySD1Ryw8aT1PVrQitMNYUl",
  bucket: "syg-photo"
});
export default {
  props: ["obj", "dataId", "typeCode", "_type"],
  data() {
    return {
      percentage: 0,
      showPercentage: false,
      duration: 0,
      objectA: {
        src: ""
      }
    };
  },
  watch: {
    obj: {
      immediate: true,
      handler(val, oldVal) {
        this.objectA.src = this.obj;
      }
    }
  },
  methods: {
    photoList1(res) {
      this.photoList.map(v => (v.url = v.fileUrl));
      return this.photoList.filter(v => res.dicCode === v.typeCode);
    },
    message1(v) {
      this.typeCode = v.dicCode;
    },
    Upload(file) {
      this.$emit("changeSubmitVideo", true);
      if (!file.file.type.includes("video")) {
        this.$message.error("只能上传视频格式的文件~");
        return false;
      }
      if((file.file.size / 1024 /1024 ).toFixed(2)>250){
        this.$message.error("视频大小超过250MB~");
        return false;
      }
      const that = this;
      this.showPercentage = true;
      let javaSize = parseInt(file.file.size / 1024);
      let javaDateType = "." + file.file.type.split("/")[1];
      let fileName = file.file.name;
      let sourceFileName = "video-" + fileName + "-" + Date.parse(new Date());
      let uid = file.file.uid;
      let videoSrc = URL.createObjectURL(file.file);
      let video = document.getElementById("video_hide");
      video.src = videoSrc;
      video.oncanplay = () => {
        this.duration = parseInt(video.duration);
      };
      // const clearTimer = setInterval(() => {
      //   if (this.percentage >= 80) {
      //     clearInterval(clearTimer);
      //   } else {
      //     this.percentage += parseInt(22000 / javaSize);
      //   }
      // }, 1000);
      client
        .multipartUpload(file.file.name, file.file, {
          progress: function(p, cpt) {
            that.percentage = (Number(p) * 100).toFixed(2);
          }
        })
        .then(res => {
          const newImageInfo = {
            dataType: that.typeCode,
            duration: that.duration,
            fileName: fileName,
            objectId: that.dataId,
            type: Number(that._type),
            url: res.res.requestUrls[0].split("?")[0],
            videoThumbailurl: `${
              res.res.requestUrls[0].split("?")[0]
            }?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast`
          };
          that.percentage = 100;
          that.showPercentage = false;
          that.$set(
            that.objectA,
            "src",
            `${
              res.res.requestUrls[0].split("?")[0]
            }?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast`
          );
          that.$emit("changeadvert", newImageInfo);
          this.$emit("changeSubmitVideo", false);
        });
    }
  }
};
</script>

<style lang='scss'>
.avatar-uploader {
  height: 178px;
  .avatar-uploader-icon {
    line-height: 178px;
  }
  .avatar {
    width: 178px;
    height: 178px;
  }
}
</style>
